<script setup lang="ts">
import deviceAlarmsPie from '@/components/ECharts/deviceAlarmsPie/index.vue';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { useDeviceAlarmsStore } from '@/store/modules/earlyWarning/useDeviceAlarmsStore';
import { ref } from 'vue';
import AlarmHistory from '@/components/AlarmHistory/index.vue';
const { alarmInfos } = storeToRefs(useDeviceAlarmsStore());
const { deviceAlarmsHandle } = useDeviceAlarmsStore();

const alarmHistoryRef = ref();
const handleMore = () => {
  alarmHistoryRef.value?.open();
};
</script>

<template>
  <div class="chart-box">
    <deviceAlarmsPie
      @click-data="deviceAlarmsHandle"
      :title="COMPONENT_TITLES.DEVICE_ALARMS"
      :value="alarmInfos.total"
      :echarts-data="alarmInfos.echartsData"
    />
    <div class="more-btn" @click="handleMore">
      <span>更多</span>
      <i class="el-icon-arrow-right"></i>
    </div>
    <alarm-history ref="alarmHistoryRef" />
  </div>
</template>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  position: relative;

  .more-btn {
    position: absolute;
    right: 20px;
    top: -19%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #00f2ff;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(0, 242, 255, 0.1);
    border: 1px solid rgba(0, 242, 255, 0.3);
    transition: all 0.3s ease;
    line-height: 1;

    &:hover {
      background: rgba(0, 242, 255, 0.2);
      border-color: rgba(0, 242, 255, 0.5);
    }

    i {
      margin-left: 4px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
